<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div></div>
    <script>
      // 动态为根元素设置字体大小
      function init() {
        // 获取屏幕宽度
        var width = document.documentElement.clientWidth;
        // 设置根元素字体大小，此时为宽度的10分之一 1rem等于这么多
        document.documentElement.style.fontSize = width / 10 + "px";
      }
      //首次加载应用设置一下
      init();
      // 监听手机旋转的事件的时机，重新设置
      window.addEventListener("orientationchange", init);
      // 监听手机窗口变化，重新设置
      window.addEventListener("resize", init);

    </script>
    <style>
      /* 默认样式，适用于所有设备 */
    

      body {
        background-color: lightblue;
        font-size: 16px;
      }

      /* 媒体查询，当视口宽度小于600px时应用 */
      @media screen and (max-width: 600px) {
        body {
          background-color: lightgreen;
          font-size: 18px;
        }

        /* 可以添加更多在小屏幕上应用的样式规则 */
        .container {
          padding: 10px;
        }

        .button {
          display: block;
          margin-bottom: 10px;
        }
      }
      @media screen and (max-width: 414px) {
        html {
          font-size: 18px;
        }
      }
      @media screen and (max-width: 375px) {
        html {
          font-size: 16px;
        }
      }
      @media screen and (max-width: 320px) {
        html {
          font-size: 12px;
        }
      }
      /* 学 识 知 广 泛 览 书 多 才*/
    </style>
  </body>
</html>
